@tailwind base;
@tailwind components;
@tailwind utilities;

.flex-centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

@supports(padding:max(0px)) {
    body, header, footer {
        padding-left: min(0vmin, env(safe-area-inset-left));
        padding-right: min(0vmin, env(safe-area-inset-right));
    }
}

.v-enter-active,
.v-leave-active {
    transition: opacity 0.2s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

.horizontalFade-enter-active,
.horizontalFade-leave-active {
    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.horizontalFade-enter-from,
.horizontalFade-leave-to {
    opacity: 0;
    transform: translate(30px, 0);
}

::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
}
::-webkit-scrollbar-track {
    background-color: hsla(0, 0%, 0%, 0.1);
    border-radius: 100vw;
    margin-block: 0.5rem;
    margin-inline: 0.5rem;
}
::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 0%, 0.2);
    border-radius: 100vw;
}
::-webkit-scrollbar-thumb:hover {
    background-color: hsla(0, 0%, 0%, 0.411);
}

select:focus {
    outline: none;
}